<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{fruits[0]}}  {{fruits[1]}}  {{fruits[2]}}
			<h1 v-for="(item,index) in fruits">
				每{{index+1}}种水果：{{item}}
			</h1>
			
			
			<h1 v-for="(item,index) in list">
				第{{index+1}}件事：{{item}}
			</h1>
			
			
			<h1 v-for="i in 11">
				{{i-1}}
			</h1>	
				
			<h1 v-for="(value,key) in student">
					{{key}}:{{value}}
				</h1>
			<ul>
				<li v-for='(item,index) in goods':key='index'>
					商品名称：{{item.title}} <br>
					商品价格：{{item.price}}
				</li>
			</ul>
			<table border="1">
				<tr v-for='row in table'>
					<td v-for='col in row'>{{col}}</td>
				</tr>
			</table>
		</div>
		<script>
			Vue.createApp({
				data(){
					return{
						fruits:['苹果','香蕉','梨'],
						list:['吃饭','睡觉','学习'],
						student:{
							name:"张三",
							cls:"软技2306"
						},
						goods:[
							{
							title:'华为手机',
							price:1999
						},
						{
							title:'小米手机',
							price:1899
						},
						],
						table:[
							[1,2,4,1,0,0],
							[1,2,4,2,1,1],
							[1,1,5,1,0,0]
						]
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>